import React, {useEffect} from 'react';
import {Descriptions, Tag} from 'antd';
import {IOrderInfo} from './types';
import './style.less';
import {OrderOptions} from "@/constants/OrderStatus";


const paymentTagMap: Record<string, { color: string; text: string }> = {
  '1': {color: 'success', text: '已付款'},
  '0': {color: 'warning', text: '未付款'},
};

const OrderBaseInfo: React.FC<{ data: IOrderInfo }> = ({data}) => {
  const statusInfo = OrderOptions[data?.orderStatus] || {color: 'default', text: data?.orderStatus};
  const paymentInfo = paymentTagMap[data?.paidStatus] || {color: 'default', text: data?.paidStatusLabel};

  useEffect(() => {
    console.log("data", data)
  }, []);
  return (
    <div className="order-base-info">
      <Descriptions
        column={2}
        bordered
        size="middle"
        labelStyle={{
          width: '140px',
          fontWeight: 500,
          backgroundColor: '#fafafa',
        }}
        contentStyle={{
          backgroundColor: '#fff',
          maxWidth: '400px',
        }}
      >
        <Descriptions.Item label="订单编号">
          <span className="important-text">{data?.id}</span>
        </Descriptions.Item>
        <Descriptions.Item label="订单状态">
          <Tag color={statusInfo.color}>{statusInfo.text}</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="客户名称">{data?.customerName}</Descriptions.Item>
        <Descriptions.Item label="支付状态">
          <Tag color={paymentInfo.color}>{paymentInfo.text}</Tag>
        </Descriptions.Item>
        <Descriptions.Item label="联系人">{data?.contactName}</Descriptions.Item>
        <Descriptions.Item label="联系电话">
          <span className="highlight-text">{data?.phone}</span>
        </Descriptions.Item>
        <Descriptions.Item label="收货地址" span={2}>
          <div className="address-text">{data?.address}</div>
        </Descriptions.Item>
        <Descriptions.Item label="配送时间">{data?.deliveryTimeLabel}</Descriptions.Item>
        <Descriptions.Item label="支付方式">
          <span className="highlight-text">{data?.paidStatus === '0' ? '尚未支付' : data?.payMethodLabel}</span>
        </Descriptions.Item>
        <Descriptions.Item label="商品金额">
          <span className="money-text">¥{data?.productPaidAmount?.toFixed(2)}</span>
        </Descriptions.Item>
        <Descriptions.Item label="押金">
          <span className="money-text">¥{data?.deposit?.toFixed(2)}</span>
        </Descriptions.Item>
        <Descriptions.Item label="已付金额">
          <span className="money-text">
            ¥{data?.paidStatus === '0' ? 0 : data?.finalAmount?.toFixed(2)} / ¥{data?.finalAmount?.toFixed(2)}
          </span>
        </Descriptions.Item>
        <Descriptions.Item label="下单时间">{data?.orderTime}</Descriptions.Item>
        <Descriptions.Item label="支付时间">{data?.paidTime || '-'}</Descriptions.Item>
        <Descriptions.Item label="结款类型">{data?.settlementTypeLabel}</Descriptions.Item>
        <Descriptions.Item label="备注" span={2}>
          <div className={data?.note ? 'note-text' : 'note-text empty'}>
            {data?.note || '无备注信息'}
          </div>
        </Descriptions.Item>
      </Descriptions>
    </div>
  );
};

export default OrderBaseInfo;
